<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品中心</title>


    <link rel="stylesheet" th:href="@{/swiper/swiper-min.css}">
    <script th:src="@{/swiper/swiper-min.js}"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;

        }

        .obc {
            object-fit: cover;
        }

        .hfull {
            height: 100%;
        }

    </style>
</head>
<body>




<div th:replace="index_header.html :: index_header"  ></div>


<div th:replace="product/product_header.html :: product_header"></div>


<br>


<style>
    .image-box ul li img {
        width: 100%;
        object-fit: cover;
        transition: all 0.3s;
    }

    .image-box .elc-img {
        background: lightgray;
        height: 185px;
        overflow: hidden;
    }

    .image-box ul li:hover .elc-img img {
        transform: scale(1.2);
    }

    .image-box ul li:hover .elc-text {
        color: var(--fontColor);
    }

    .image-box ul li .elc-text {
        text-align: center;
        padding: 22px 0;
        color: #58596d;
    }


    .image-box ul li a {
        text-decoration: none;
        border: 1px solid lightgray;
        display: block;
        overflow: hidden;
    }

    @media screen and (min-width: 901px) {
        /* 电脑  */
        .box {
            width: 80%;
            margin: auto;
        }

        .image-box ul li {
            width: 25%;
            float: left;
            padding: 20px;
        }
    }

    @media screen and (max-width: 900px) {

        /* 手机 */
        .box {
            width: 93%;
            margin: auto;
        }

        .image-box ul li {
            width: 100%;
            float: left;
            padding: 20px;
        }
    }
</style>
<div class="box">
    <div class="frist" style="padding: 20px;">
        <h1>公司产品</h1>
        <h2 style="font-weight: normal;  text-transform: uppercase;   color: var(--fontColor);">product</h2>
    </div>


    <div class="image-box">
        <ul class="  clearfix">
            <li class="" th:each="item, iterStat : ${pageinfo}">
                <a th:href="@{'/product/id/'+${item.id}}" class="">
                    <p class="elc-img">
                        <img th:src="@{'/images/Product/'+${item.id} + '.jpg'}" alt="" class="wfull  hfull  ">
                    </p>
                    <p class="elc-text" th:text="${item.title}"></p>
                </a>
            </li>
        </ul>
    </div>


    <script th:inline="javascript">
        console.log([[${pageinfo}]]);
        var dataaa = [[${pageinfo}]];
        console.log(dataaa[0].type);
        var type = dataaa[0].type;
        document.getElementById(type).classList.add("active")
    </script>

</div>






<div th:replace="footer.html :: tongchuang-footer"  ></div>









</body>
</html>